// options的参数
// type  请求的方式  get, post
// url   请求的接口地址
// data  请求携带数据 (string|object)
// async 是否异步(默认true)
// dataType 接口返回数据类型(默认"text" "html" "json") 
// success  请求成功时执行的回调函数  回调函数有一个参数=>接口返回的数据

// 模拟jquery => $.ajax

const $ = {
    ajax: function (options) { // 对象参数{url,data,async,dataType,success}
        // debugger;
        var { type = "get", url, data = "", async = true, dataType = "text", success } = options;

        // success = function (res) {
        //     console.log("请求完成");
        // }

        if (data instanceof Object) {// 如果data是对象 => 解析为参数数据队列
            var list = [];
            for (var key in data) {
                var val = data[key];
                var item = key + "=" + val;  // "user=a123123"
                list.push(item);
            }
            data = list.join("&");
            // console.log(data);
        }

        var xhr = new XMLHttpRequest(); // 0 

        if (type.toLowerCase() === "get") {
            xhr.open("get", data ? url + "?" + data : url, async);  // 1
            xhr.send();
        } else if (type.toLowerCase() === "post") {
            xhr.open("post", url, async);  // 1
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(data);
        }


        xhr.onreadystatechange = function () {
            // 2 3 4
            // console.log("请求状态改变", xhr.readyState);

            if (xhr.readyState == 4 && xhr.status == 200) {
                var result = xhr.responseText;
                if (dataType === "json") {
                    result = JSON.parse(xhr.responseText);
                }
                // console.log(result);  //接口返回的数据

                // 判断用户是否存在  => 输出结果
                // 成绩搜索排序分页  => 动态渲染
                // 删除成绩         => 删除结果
                // 每次拿到数据之后要执行的操作 每个接口都不一样 

                if (success) {
                    success(result); // 将接口返回的数据result 作为回调函数的实际参数
                }

            }

        }
    }
}